<template>
  <div style="background: #fff;">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="banner名称" prop="bannerName">
        <el-input
          clearable
          type="text"
          v-model="ruleForm.bannerName"
          placeholder="不超过20个字"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="bannerUrl" prop="shortName">
        <el-input v-model="ruleForm.bannerUrl"></el-input>
      </el-form-item> -->
      <el-form-item label="上传banner图" prop="bannerUrl">
        <el-upload
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
          :auto-upload="true"
          :http-request="uploadFile"
          action="customize"
          :file-list="fileList"
          :limit="1"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>

      <el-form-item label="banner类型" prop="bannerType">
        <el-select
          v-model="ruleForm.bannerType"
          placeholder="banner类型"
          class="handle-select mr10"
        >
          <el-option key="0" label="跳商品详情" value="0"></el-option>
          <el-option key="1" label="只读" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.bannerType == 0 || ruleForm.bannerType == '跳转详情页'"
        label="商品ID"
        prop="stuffId"
      >
        <el-button type="default" @click="getStuffId">{{
          ruleForm.stuffId
        }}</el-button>
      </el-form-item>

      <el-form-item label="banner状态" prop="enableStatus">
        <el-select
          v-model="ruleForm.enableStatus"
          placeholder="banner状态"
          class="handle-select mr10"
        >
          <el-option key="0" label="启用" value="0"></el-option>
          <el-option key="1" label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="memo">
        <el-input v-model="ruleForm.memo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="saveIncrease()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import util from "utils/util";
export default {
  name: "BannerIncrease",
  data() {
    return {
      ruleForm: {
        stuffId: "获取商品ID",
        bannerName: "",
        bannerUrl: "",
        sort: "",
        bannerType: "1",
        enableStatus: "0",
        memo: "",
      },
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      //   disabled: false,
      rules: {
        stuffId: [
          { required: false, message: "必填不能为空", trigger: "blur" },
        ],
        memo: [{ required: false, message: "必填不能为空", trigger: "blur" }],
        enableStatus: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        bannerType: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "必填不能为空", trigger: "blur" }],
        bannerUrl: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        bannerName: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        stuffId: [{ required: true, message: "必填不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.getBannerDetail(this.$route.query.id);
    }
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (oldVal == "/product-manage") {
        if (this.$route.query.stuffId) {
          this.ruleForm.stuffId = this.$route.query.stuffId;
        }
      }
      if (oldVal == "/banner-image-manage") {
        if (this.$route.query.id) {
          this.$route.meta.title = "编辑banner";
          this.getBannerDetail(this.$route.query.id);
        }
      }
    },
  },
  methods: {
    getBannerDetail(id) {
      this.$axios.get(`/ad/banner/${id}`).then(({ data: res }) => {
        console.log(res);
        if (res.code != 0) {
          return;
        }
        var {
          id,
          bannerName,
          bannerUrl,
          stuffId,
          sort,
          bannerType,
          enableStatus,
          memo,
        } = res.data;
        this.ruleForm = {
          id,
          bannerName,
          bannerUrl,
          stuffId,
          sort,
          bannerType,
          enableStatus,
          memo,
        };
        this.fileList = [];
        this.fileList.push({
          name: this.ruleForm.bannerName,
          url: this.ruleForm.bannerUrl,
        });
        this.ruleForm.bannerType =
          this.ruleForm.bannerType == 1 ? "只读" : "跳转详情页";
        this.ruleForm.enableStatus =
          this.ruleForm.enableStatus == 0 ? "启用" : "停用";
        console.log(this.ruleForm);
        this.ruleForm.stuffId = !this.ruleForm.stuffId
          ? "获取商品ID"
          : this.ruleForm.stuffId;
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);

      // if (this.$route.query.id || this.$route.query.stuffId) {
      //   // 编辑时删除
      //   this.$axios
      //     .put(`/ad/banner/updateDeleteBannerImage?bannerUrl=${file.url}`, {})
      //     .then(({ data: res }) => {
      //       console.log(res);
      //       if (res.code != 0) {
      //         return;
      //       }
      //       this.$message.success("删除成功");
      //     })
      //     .catch(() => {});
      // } else {
      //   this.$axios
      //     .put(`/ad/banner/saveDeleteBannerImage?bannerUrl=${file.url}`, {})
      //     .then(({ data: res }) => {
      //       // 新增时删除
      //       console.log(res);
      //       if (res.code != 0) {
      //         return;
      //       }
      //       this.$message.success("删除成功");
      //     })
      //     .catch(() => {});
      // }
    },
    // 获取商品ID
    getStuffId() {
      console.log(11);
      this.$router.push({
        path: "/product-manage",
        query: { fromBannerIncrease: true },
      });
    },
    // 上传图片
    uploadFile(params) {
      //   if (this.disabled) {
      //     return;
      //   }
      const _file = params.file;
      const isLt2M = _file.size / 1024 / 1024 < 2;
      var formData = new FormData();
      formData.append("file", _file);
      if (!isLt2M) {
        this.$message.error("请上传2M以下的.图片文件");
        return false;
      }
      this.$axios
        .post("/sys/oss/uploadBanner", formData)
        .then(({ data: res }) => {
          console.log("图片链接", res);
          if (res.code != 0) {
            return;
          }
          this.ruleForm.bannerUrl = res.data.src;
          this.$message.success("上传成功");
          //   this.disabled = true;
        });
    },
    saveIncrease() {
      // 得到成功的提示
      var ruleForm = this.ruleForm;
      console.log(ruleForm, { ...ruleForm });
      console.log(this.$route.query.id, this.$route.query.stuffId);
      if (this.$route.query.id || this.$route.query.stuffId) {
        // 保存编辑时
        if (ruleForm.bannerType == "只读" || ruleForm.bannerType == "1") {
          ruleForm.bannerType = "1";
          ruleForm.stuffId = "";
        } else if (
          ruleForm.bannerType == "跳转详情页" ||
          ruleForm.bannerType == "0"
        ) {
          ruleForm.bannerType = "0";
        }
        if (ruleForm.enableStatus == "启用" || ruleForm.enableStatus == "0") {
          ruleForm.enableStatus = "0";
        } else if (
          ruleForm.enableStatus == "停用" ||
          ruleForm.enableStatus == "1"
        ) {
          ruleForm.enableStatus = "1";
        }
        console.log(ruleForm);
        this.$axios
          .put("/ad/banner", {
            id: this.$route.query.id || this.ruleForm.id,
            ...ruleForm,
          })
          .then(({ data: res }) => {
            if (res.code != 0) {
              return;
            }
            this.$message.success("编辑成功");
            this.$router.push({
              path: "/banner-image-manage",
            });
          });
      } else {
        // 保存新增
        // 筛选必填项
        if (ruleForm.stuffId == "获取商品ID") {
          ruleForm.stuffId = "";
        }
        this.$axios
          .post("/ad/banner", { ...ruleForm })
          .then(({ data: res }) => {
            if (res.code != 0) {
              return;
            }
            this.$message.success("新增成功");
            this.$router.push({
              path: "/banner-image-manage",
            });
          })
          .catch(() => {});
      }
    },
    cancelForm(formName) {
      // this.$refs[formName].resetFields();
      // this.$router.back();
      this.$router.replace({
        path: "/banner-image-manage",
      });
    },
  },
};
</script>
<style lang="scss">
.el-input,
.el-textarea {
  width: 50%;
}
.el-select > .el-input {
  width: 100px;
}
</style>
